<template>
  <div class="life-record-container">
    <el-scrollbar>
      <div class="timeline-grid">
        <div
          v-for="year in years"
          :key="year"
          class="grid-cell"
          @click="addEvent(year)"
        >
          <div class="year-header">{{ year }}年</div>
          <div class="events-list">
            <div
              v-for="(event, index) in getEventsForYear(year)"
              :key="index"
              class="event-item"
              :style="getEventStyle(event)"
              @click.stop="editEvent(event, year)"
            >
              {{ index + 1 }}. {{ event.description }}
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <EventEditDialog
      v-model="showModal"
      :year="currentYear"
      :event="currentEvent"
      :is-editing="editingEventIndex !== null"
      @save="saveEvent"
      @delete="deleteEvent"
      @close="closeModal"
    />
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

import { eventTypeData, getEventsData } from './data'
import EventEditDialog from './EventEditDialog.vue'

// 定义数据
const years = ref(Array.from({ length: 100 }, (_, i) => 1992 + i))
const events = ref({}) // 所有事件，以年份为键的对象，值为事件数组
events.value = getEventsData()
const showModal = ref(false)
const currentYear = ref(0)
const editingEventIndex = ref(null)
const currentEvent = reactive({
  description: '',
  type: '' // 默认为空
})

const getEventsForYear = (year) => {
  return events.value[year] || []
}

const getEventStyle = (event) => {
  const selected = eventTypeData.find(item => item.value === event.type)
  if(selected) {
    return {
      backgroundColor: selected.color,
      color: '#fff'
    }
  }
  return {}
}

// 添加事件
const addEvent = (year) => {
  currentYear.value = year
  editingEventIndex.value = null
  currentEvent.description = ''
  currentEvent.type = ''
  showModal.value = true
}

// 编辑事件
const editEvent = (event, year) => {
  currentYear.value = year
  editingEventIndex.value = events.value[year].findIndex(e => e === event)
  currentEvent.description = event.description
  currentEvent.type = event.type
  showModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  editingEventIndex.value = null
}

// 保存事件
const saveEvent = ({ year, event }) => {
  if (!events.value[year]) {
    events.value[year] = []
  }

  if (editingEventIndex.value !== null) {
    events.value[year][editingEventIndex.value] = { ...event }
  } else {
    events.value[year].push({ ...event })
  }

  localStorage.setItem('lifeEvents', JSON.stringify(events.value))
  closeModal()
}

// 删除事件
const deleteEvent = () => {
  if (editingEventIndex.value !== null) {
    events.value[currentYear.value].splice(editingEventIndex.value, 1)
    localStorage.setItem('lifeEvents', JSON.stringify(events.value))
    ElMessage.success('事件删除成功')
  }
  closeModal()
}
</script>

<style lang="scss" scoped>
.life-record-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;

  .grid-cell {
    display: flex;
    flex-direction: column;
    padding: 10px;
    min-height: 200px;
    background-color: #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .year-header {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .events-list {
    flex: 1;
    overflow-y: auto;
  }

  .event-item {
    padding: 4px;
    margin-top: 8px;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>
